<script setup>
import { ref } from 'vue'
const props = defineProps({
  tableData: {
    type: Array,
    default: []
  },
  columns: {
    type: Array,
    default: []
  },
  options: {
    type: Object,
    default: []
  }
})
const emits = defineEmits(['handleTable'])

function handleTable(e, type) {
  emits('handleTable', e.row, type)
}
function handleSwitch(e) {
  console.log(e)
}
</script>

<template>
  <div class="table-wrapper">
    <el-table
      :data="props.tableData"
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <slot name="firstColumn"></slot>
      <el-table-column
        v-for="item in props.columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        min-width="160"
        :sortable="item.sortable"
        show-overflow-tooltip
      >
        <template #default="scope">
          <!-- 实习处理 -->
          <!-- 实习状态 -->
          <el-tag
            v-if="item.prop == 'internship'"
            :type="
              scope.row.internship == 0 ? 'info' : scope.row.internship == 1 ? 'warning' : 'success'
            "
          >
            {{
              scope.row.internship == 0
                ? '未实习'
                : scope.row.internship == 1
                  ? '正在实习'
                  : '已实习'
            }}
          </el-tag>

          <!-- 审核状态 -->
          <el-tag v-if="item.slot == 'license' && scope.row.status == 0" type="success">
            已实习
          </el-tag>

          <!-- 账号状态开关 -->
          <el-popconfirm
            v-if="item.prop == 'status'"
            :title="scope.row.status == 0 ? '你确定要启用该账号吗' : '你确定要禁用该账号吗?'"
            @cancel="scope.row.status = scope.row.status == 1 ? 0 : 1"
            @confirm="handleTable(scope, 'switch')"
          >
            <template #reference>
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="handleSwitch(scope.row.status)"
                class="status-switch"
              />
            </template>
          </el-popconfirm>

          <!-- 导员状态 -->
          <el-tag v-if="item.prop == 'instructor' && !scope.row.instructor" type="info">
            暂未分配导员
          </el-tag>
          <el-tag
            v-if="item.prop == 'instructorAccount' && !scope.row.instructorAccount"
            type="info"
          >
            暂未分配导员
          </el-tag>
          <span
            v-if="item.prop == 'instructor' && scope.row.instructor"
            class="instructor-text"
            :class="{ 'instructor-text-hover': true }"
          >
            {{ scope.row.instructor }}
          </span>
          <el-tag v-if="item.prop == 'account' && !scope.row.account&&item.label=='学院管理员账号'" type="danger">
            暂未分配学院管理员账号
          </el-tag>
        </template>
      </el-table-column>
      <!-- 表格相关操作 -->
      <el-table-column
        fixed="right"
        label="操作"
        :width="props.options.length == 1 ? 130 : props.options.length == 2 ? 220 : 250"
        v-if="props.options.length"
        class="table-options"
      >
        <template #default="obj">
          <el-button
            v-for="item in props.options"
            :key="item.prop"
            :type="item.type || 'primary'"
            plain
            @click="handleTable(obj, item.prop)"
            >{{ item.label }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.table-wrapper {
  width: 100%;
  overflow: auto;

  :deep(.el-table) {
    border-radius: 8px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);

    // 表头样式
    th {
      background-color: #f7f8fa !important;
      color: #333;
      font-weight: 500;
      height: 52px;
      padding: 8px 0;
      border-bottom: 1px solid #ebeef5;
      transition: background-color 0.2s;
    }

    // 表格内容样式
    td {
      padding: 12px 0;
      color: #606266;
      border-bottom: 1px solid #ebeef5;
      transition: background-color 0.2s;
    }

    // 操作列样式
    .table-options {
      .el-button {
        margin: 0 4px;
        padding: 6px 16px;
        border-radius: 4px;
        font-size: 13px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    // 状态开关样式
    .status-switch {
      .el-switch__core {
        width: 44px !important;
        height: 22px;
        border-radius: 11px;
      }
    }

    // 斑马纹样式
    .el-table__row:nth-child(even) {
      background-color: #fafbfc;
    }

    // hover效果
    .el-table__row:hover {
      background-color: #f5f7fa;
      td {
        background-color: transparent;
      }
    }

    // tag标签样式
    .el-tag {
      padding: 4px 12px;
      border-radius: 4px;
      font-size: 13px;
      border: none;

      &.el-tag--success {
        background-color: rgba(103, 194, 58, 0.1);
        color: #67c23a;
      }

      &.el-tag--warning {
        background-color: rgba(230, 162, 60, 0.1);
        color: #e6a23c;
      }

      &.el-tag--info {
        background-color: rgba(144, 147, 153, 0.1);
        color: #909399;
      }
    }

    // 导员文字样式
    .instructor-text {
      position: relative;
      color: #409eff;
      cursor: pointer;
      padding: 4px 12px;
      border-radius: 4px;
      font-weight: 500;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

      &.instructor-text-hover {
        &:hover {
          color: #1890ff;
          background-color: rgba(64, 158, 255, 0.1);
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);

          &::before {
            transform: scaleX(1);
            opacity: 1;
          }

          &::after {
            transform: scaleX(1);
          }
        }

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(120deg, rgba(64, 158, 255, 0.1), rgba(24, 144, 255, 0.1));
          border-radius: 4px;
          opacity: 0;
          transform: scaleX(0.9);
          transform-origin: center;
          transition: all 0.3s ease;
        }

        &::after {
          content: '';
          position: absolute;
          bottom: 2px;
          left: 12px;
          width: calc(100% - 24px);
          height: 1px;
          background: linear-gradient(90deg, transparent, #409eff, transparent);
          transform: scaleX(0);
          transform-origin: center;
          transition: transform 0.3s ease;
        }
      }
    }
  }
}
</style>
